<template>
  <div class="exchange-page">
    <div class="exchange-content">
      <!-- 左侧功能导航区 -->
      <div class="left-navigation">
        <div class="publish-module">
          <div class="publish-header">
            <span class="camera-icon">📷</span>
            <h2>发布模块</h2>
          </div>
          <div class="publish-content">
            <p class="publish-text">点击发布你的闲置</p>
            <div class="ai-tag">AI 自动生成描述</div>
          </div>
          <button class="publish-btn" @click="showPublishModal = true">
            <span class="plus-icon">+</span>
            <span>立即发布</span>
          </button>
        </div>
        
        <div class="category-navigation">
          <div class="category-header">
            <span class="category-icon">📦</span>
            <h2>物品分类</h2>
          </div>
          <div class="category-list">
            <div class="category-item" v-for="c in categoryStats" :key="c.name" @click="selectedCategory = c.name; applyFilters()">
              <span class="category-name">{{ c.name || '其他' }}</span>
              <span class="category-count">{{ c.count }} 件闲置</span>
            </div>
          </div>
        </div>
        
        <div class="communication-help">
          <div class="help-header">
            <span class="help-icon">💬</span>
            <h2>沟通与帮助</h2>
          </div>
          <div class="help-list">
            <div class="help-item">
              <span class="help-text">我的沟通</span>
            </div>
            <div class="help-item" @click="showSafetyTips = true">
              <span class="help-text">安全指南</span>
              <span class="new-tag">NEW</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 中间主内容区 -->
      <div class="main-content">
        <!-- 同城筛选工具栏 -->
        <div class="filter-toolbar">
          <div class="distance-filter">
            <button class="filter-btn active">＜5km（低碳优选）</button>
            <button class="filter-btn">＜10km</button>
            <button class="filter-btn">全城</button>
          </div>
          
          <div class="sort-filter">
            <select>
              <option>最新发布</option>
              <option>最多咨询</option>
            </select>
          </div>
          
          <div class="type-filter">
            <select v-model="selectedType" @change="applyFilters()">
              <option value="all">全部类型</option>
              <option value="exchange">可交换</option>
              <option value="gift">可赠送</option>
            </select>
          </div>
        </div>
        
        <!-- 双栏物品卡片流 -->
        <div class="item-grid">
          <div class="item-card" v-for="item in filteredItems" :key="item.id">
            <div class="card-image">
              <img :src="item.image" :alt="item.title">
              <div class="ai-label">{{ item.category }}</div>
              <div class="type-chip" :class="item.offer_type === 'gift' ? 'gift' : 'exchange'">{{ item.offer_type === 'gift' ? '可赠送' : '可交换' }}</div>
            </div>
            <div class="card-content">
              <div class="user-row">
                <div class="avatar-mini-wrap">
                  <img v-if="item.provider_avatar_url" class="avatar-mini" :src="item.provider_avatar_url" alt="avatar">
                  <div v-else class="avatar-mini placeholder"></div>
                </div>
                <div class="user-meta">
                  <div class="name-mini">{{ item.provider_nickname || item.provider_username || '匿名' }}</div>
                  <div class="location-mini">{{ item.city || '未知位置' }}</div>
                  <div class="contact-mini">
                    <span class="phone-mini">📞 {{ item.provider_phone || '未公开' }}</span>
                    <span class="email-mini">✉️ {{ item.provider_email || '未公开' }}</span>
                  </div>
                </div>
              </div>
              <h3 class="item-title">{{ item.title }}</h3>
              <p class="item-description">{{ item.description }}</p>
              <div class="card-footer">
                <div class="item-info">
                  <span class="distance" v-if="item.distance_km !== null && item.distance_km !== undefined">{{ item.distance_km }}km</span>
                  <span class="time">{{ item.time }}</span>
                </div>
                <button class="contact-btn" @click="showContactDialog(item)">
                  联系 TA
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 右侧辅助信息区 -->
      <div class="right-info">
        <div class="safety-tips">
          <div class="tips-header">
            <span class="shield-icon">🛡️</span>
            <h3>安全交易 3 点提示</h3>
          </div>
          <div class="tips-content">
            <div class="tip-item">
              <span class="tip-number">1</span>
              <span class="tip-text">面交时选择公共场所，避免单独见面</span>
            </div>
            <div class="tip-item">
              <span class="tip-number">2</span>
              <span class="tip-text">提前确认物品状况，避免纠纷</span>
            </div>
            <div class="tip-item">
              <span class="tip-number">3</span>
              <span class="tip-text">不轻易透露个人隐私信息</span>
            </div>
          </div>
          <a href="#" class="more-link">查看更多</a>
        </div>
        
        <div class="exchange-dynamics">
          <h3>近期成功交换</h3>
          <div class="dynamics-list">
            <div class="dynamic-item">
              <span class="user">@小绿</span>
              <span class="action">用书架换露营装备</span>
              <span class="time">2小时前</span>
            </div>
            <div class="dynamic-item">
              <span class="user">@环保达人</span>
              <span class="action">用咖啡机换瑜伽垫</span>
              <span class="time">5小时前</span>
            </div>
            <div class="dynamic-item">
              <span class="user">@绿色生活</span>
              <span class="action">用旧衣服换植物</span>
              <span class="time">1天前</span>
            </div>
          </div>
        </div>
        
        <div class="carbon-results">
          <div class="results-content">
            <div class="icon-section">
              <span class="leaf-icon">🍃</span>
              <span class="recycle-icon">♻️</span>
            </div>
            <h3>低碳成果</h3>
            <p class="result-text">累计减少物流碳排 <span class="highlight">125.6kg</span>，相当于种 <span class="highlight">5</span> 棵树</p>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 安全提示弹窗 -->
    <div class="modal-overlay" v-if="showSafetyTips" @click="showSafetyTips = false">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <span class="shield-icon">🛡️</span>
          <h2>安全交易小贴士</h2>
          <button class="close-btn" @click="showSafetyTips = false">×</button>
        </div>
        <div class="modal-body">
          <div class="tip-item">
            <span class="tip-number">1</span>
            <div class="tip-content">
              <h3>面交安全</h3>
              <p>选择人流量较大的公共场所进行面交，如商场、咖啡厅等。避免在偏僻地点或私人住所见面。</p>
            </div>
          </div>
          <div class="tip-item">
            <span class="tip-number">2</span>
            <div class="tip-content">
              <h3>沟通建议</h3>
              <p>在平台内完成初步沟通，确认物品状况和交易细节。避免过早透露个人联系方式。</p>
            </div>
          </div>
          <div class="tip-item">
            <span class="tip-number">3</span>
            <div class="tip-content">
              <h3>付款提醒</h3>
              <p>本平台不涉及资金交易，所有支付行为请线下协商。谨防任何要求预付费用的请求。</p>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="confirm-btn" @click="showSafetyTips = false">我知道了</button>
        </div>
      </div>
    </div>
    
    <!-- 联系弹窗 -->
    <div class="modal-overlay" v-if="showContactDialogFlag" @click="showContactDialogFlag = false">
      <div class="contact-modal" @click.stop>
        <div class="modal-header">
          <h2>联系卖家</h2>
          <button class="close-btn" @click="showContactDialogFlag = false">×</button>
        </div>
        <div class="modal-body">
          <div class="safety-reminder">
            <span class="warning-icon">⚠️</span>
            <p>请在沟通中注意保护个人隐私，避免提前支付任何费用</p>
          </div>
          <div class="item-preview">
            <img :src="selectedItem.image" :alt="selectedItem.title">
            <div class="item-info">
              <h3>{{ selectedItem.title }}</h3>
              <p>{{ selectedItem.description }}</p>
            </div>
          </div>
          <div class="contact-options">
            <button class="chat-btn">在线沟通</button>
            <button class="phone-btn">电话联系</button>
          </div>
        </div>
      </div>
    </div>

    <div class="modal-overlay" v-if="showPublishModal" @click="showPublishModal = false">
      <div class="publish-modal" @click.stop>
        <div class="modal-header">
          <h2>发布交换物品</h2>
          <button class="close-btn" @click="showPublishModal = false">×</button>
        </div>
        <div class="modal-body">
          <div class="form-row">
            <label>标题</label>
            <input type="text" v-model="formTitle" placeholder="例如：九成新咖啡机" />
          </div>
          <div class="form-row">
            <label>描述</label>
            <textarea v-model="formDescription" rows="3" placeholder="物品成色、配件、期望交换物等"></textarea>
          </div>
          <div class="form-row">
            <label>分类</label>
            <select v-model="formCategory">
              <option value="">未选择</option>
              <option v-for="c in categories" :key="c" :value="c">{{ c || '其他' }}</option>
            </select>
          </div>
          <div class="form-row">
            <label>城市</label>
            <select v-model="formCity">
              <option value="">未选择</option>
              <option>北京</option>
              <option>上海</option>
              <option>广州</option>
              <option>深圳</option>
              <option>杭州</option>
              <option>南京</option>
              <option>武汉</option>
              <option>成都</option>
              <option>重庆</option>
              <option>西安</option>
              <option>天津</option>
              <option>苏州</option>
              <option>其他</option>
            </select>
          </div>
          <div class="form-row">
            <label>类型</label>
            <select v-model="formOfferType">
              <option value="exchange">可交换</option>
              <option value="gift">可赠送</option>
            </select>
          </div>
          <div class="form-row">
            <label>图片</label>
            <input type="file" accept="image/*" @change="onImageSelect" />
            <div class="image-preview" v-if="imagePreview">
              <img :src="imagePreview" alt="预览" />
            </div>
          </div>
          <div class="form-row">
            <label>
              <input type="checkbox" v-model="useLocation" @change="requestLocation" /> 使用当前位置
            </label>
          </div>
          <div class="form-row" v-if="useLocation">
            <div class="location-preview" v-if="locationPreview || (lat && lng)">
              <span class="location-icon">📍</span>
              <span class="location-text">{{ locationPreview || (lat + ', ' + lng) }}</span>
              <button class="relo-btn" type="button" @click="requestLocation" :disabled="locating">{{ locating ? '定位中…' : '重新定位' }}</button>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="cancel-btn" @click="showPublishModal = false">取消</button>
          <button class="confirm-btn" :disabled="publishing" @click="submitExchangeItem">发布</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
// 已移除未使用的路由实例
import { 
  getExchangeItems,
  applyForExchange,
  uploadExchangeImage,
  createExchangeItem
} from '../api/exchange'
import request from '../utls/require'

// 模块内部不直接使用路由实例

// 响应式数据
const items = ref<any[]>([])
const filteredItems = ref<any[]>([])
const categories = ref<string[]>([])
const categoryStats = ref<{name: string, count: number}[]>([])
const isLoading = ref(false)
const showSafetyTips = ref(false)
const showContactDialogFlag = ref(false)
const selectedItem = ref<any | null>(null)
const searchKeyword = ref('')
const selectedCategory = ref('')
const selectedCity = ref('')
const sortBy = ref('latest')
const selectedType = ref('all')

const showPublishModal = ref(false)
const formTitle = ref('')
const formDescription = ref('')
const formCategory = ref('')
const formCity = ref('')
const formOfferType = ref<'exchange' | 'gift'>('exchange')
const imageFile = ref<File | null>(null)
const imagePreview = ref('')
const useLocation = ref(false)
const lat = ref<number | null>(null)
const lng = ref<number | null>(null)
const publishing = ref(false)
const locationPreview = ref('')
const locating = ref(false)
const locationInfo = ref<any | null>(null)

// 筛选选项
// 已移除未使用的演示数据与排序选项，避免TS构建报未使用错误

// 计算属性
// 过滤状态由相关控件直接计算，无需额外computed，减少未使用警告

// 方法
const loadExchangeItems = async () => {
  isLoading.value = true
  try {
    const response = await getExchangeItems()
    const raw = (response?.data?.items) ?? []
    items.value = (Array.isArray(raw) ? raw : []).map((i: any) => ({
      id: i.item_id,
      image: i.image_url,
      title: i.title,
      description: i.description || '',
      category: i.category || '其他',
      city: i.city || '',
      time: i.created_at,
      distance_km: i.distance_km,
      lat: i.lat,
      lng: i.lng,
      status: i.status,
      offer_type: i.offer_type || 'exchange',
      provider_username: i.provider_username,
      provider_nickname: i.provider_nickname,
      provider_avatar_url: i.provider_avatar_url,
      provider_phone: i.provider_phone,
      provider_email: i.provider_email
    }))
    const respCats = response?.data?.categories
    const respStats = response?.data?.stats
    if (Array.isArray(respCats) && respCats.length) {
      categories.value = respCats
    } else {
      const uniq = Array.from(new Set(items.value.map(i => i.category || '其他')))
      categories.value = uniq
    }
    if (Array.isArray(respStats) && respStats.length) {
      categoryStats.value = respStats
    } else {
      const counts: Record<string, number> = {}
      items.value.forEach(i => { const k = i.category || '其他'; counts[k] = (counts[k] || 0) + 1 })
      categoryStats.value = Object.keys(counts).map(k => ({ name: k, count: counts[k] }))
    }
    applyFilters()
  } catch (error) {
    console.error('加载交换物品失败:', error)
  } finally {
    isLoading.value = false
  }
}

const applyFilters = () => {
  let filtered = [...items.value]
  
  // 关键词搜索
  if (searchKeyword.value) {
    filtered = filtered.filter(item => 
      item.title.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
      item.description.toLowerCase().includes(searchKeyword.value.toLowerCase())
    )
  }
  
  // 分类筛选
  if (selectedCategory.value && selectedCategory.value !== '全部') {
    filtered = filtered.filter(item => item.category === selectedCategory.value)
  }
  
  // 城市筛选
  if (selectedCity.value && selectedCity.value !== '全部城市') {
    filtered = filtered.filter(item => item.city === selectedCity.value)
  }
  
  // 排序
  switch (sortBy.value) {
    case 'latest':
      filtered.sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime())
      break
    case 'nearest':
      filtered.sort((a, b) => (parseFloat(a.distance_km ?? 'Infinity') - parseFloat(b.distance_km ?? 'Infinity')))
      break
    case 'popular':
      filtered.sort((a, b) => (b.views || 0) - (a.views || 0))
      break
  }
  
  // 类型筛选
  if (selectedType.value !== 'all') {
    filtered = filtered.filter(item => (item.offer_type || 'exchange') === selectedType.value)
  }
  filteredItems.value = filtered
}

const showContactDialog = async (item: any) => {
  selectedItem.value = item
  showContactDialogFlag.value = true
  
  // 记录联系行为
  try {
    // 使用申请交换接口替代未定义的contactSeller函数
    await applyForExchange({ item_id: item.id })
  } catch (error) {
    console.error('联系卖家失败:', error)
  }
}


// 生命周期
onMounted(() => {
  loadExchangeItems()
})

const onImageSelect = (e: Event) => {
  const input = e.target as HTMLInputElement
  const file = input.files && input.files[0]
  if (!file) return
  imageFile.value = file
  const reader = new FileReader()
  reader.onload = () => { imagePreview.value = String(reader.result || '') }
  reader.readAsDataURL(file)
}

const requestLocation = () => {
  if (!useLocation.value) { lat.value = null; lng.value = null; locationPreview.value = ''; locationInfo.value = null; return }
  locating.value = true
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      p => { lat.value = p.coords.latitude; lng.value = p.coords.longitude; reverseGeocode() },
      () => { locating.value = false }
    )
  } else {
    locating.value = false
  }
}

const formatAddress = (data: any): string => {
  const ad = data?.ad_info || {}
  const fa = data?.formatted_addresses || {}
  const addr = data?.address || ''
  const parts = [ad.province, ad.city, ad.district].filter(Boolean)
  const tail = fa.recommend || fa.rough || addr || ''
  return parts.length ? `${parts.join(' ')} ${tail}`.trim() : tail
}

const allowedCities = ['北京','上海','广州','深圳','杭州','南京','武汉','成都','重庆','西安','天津','苏州','其他'] as const
const normalizeCity = (name: string): string => {
  const n = String(name || '').replace(/市$/,'').replace(/\s+/g,'')
  const hit = allowedCities.find(c => c === n)
  return hit || '其他'
}

const reverseGeocode = async () => {
  if (lat.value == null || lng.value == null) { locating.value = false; return }
  try {
    const resp: any = await request({ url: '/xiangsu/location/reverse/', method: 'get', params: { lat: lat.value, lng: lng.value } })
    if (resp?.success && resp?.data) {
      locationPreview.value = formatAddress(resp.data)
      const ad = resp.data?.ad_info || {}
      locationInfo.value = { province: ad.province, city: ad.city, district: ad.district, address: resp.data?.address }
      if (ad.city) { formCity.value = normalizeCity(ad.city) }
    }
  } catch (_) {
  } finally {
    locating.value = false
  }
}

const submitExchangeItem = async () => {
  if (!formTitle.value.trim()) { showMessage('请输入标题','error'); return }
  if (!imageFile.value) { showMessage('请上传图片','error'); return }
  publishing.value = true
  try {
    const fd = new FormData()
    fd.append('image', imageFile.value)
    const up = await uploadExchangeImage(fd)
    const url = up?.data?.data?.image_url || up?.data?.image_url || ''
    if (!url) { showMessage('图片上传失败','error'); publishing.value = false; return }
    const itemForm = new FormData()
    itemForm.append('title', formTitle.value)
    if (formDescription.value) itemForm.append('description', formDescription.value)
    if (formCategory.value) itemForm.append('category', formCategory.value)
    if (formCity.value) itemForm.append('city', formCity.value)
    itemForm.append('image_url', url)
    itemForm.append('offer_type', formOfferType.value)
    if (useLocation.value && lat.value != null && lng.value != null) {
      itemForm.append('lat', String(lat.value))
      itemForm.append('lng', String(lng.value))
    }
    const resp = await createExchangeItem(itemForm)
    const ok = !!((resp as any)?.success)  // 类型断言：resp已经是response.data，直接访问success字段
    if (ok) {
      showMessage('发布成功','success')
      showPublishModal.value = false
      formTitle.value = ''
      formDescription.value = ''
      formCategory.value = ''
      formCity.value = ''
      imageFile.value = null
      imagePreview.value = ''
      useLocation.value = false
      lat.value = null
      lng.value = null
      await loadExchangeItems()
    } else {
      showMessage('发布失败','error')
    }
  } catch (_) {
    showMessage('发布失败','error')
  } finally {
    publishing.value = false
  }
}

const showMessage = (message: string, type: 'success' | 'error' = 'success') => {
  const toast = document.createElement('div')
  toast.textContent = message
  const base = 'position:fixed;left:50%;bottom:80px;transform:translateX(-50%);padding:10px 16px;border-radius:10px;color:#fff;box-shadow:0 6px 20px rgba(0,0,0,0.25);z-index:9999;font-size:14px;opacity:0.95;'
  const bg = type === 'success' ? 'background:#2E8B57;' : 'background:#E74C3C;'
  toast.setAttribute('style', base + bg)
  document.body.appendChild(toast)
  setTimeout(() => {
    toast.style.transition = 'opacity 0.3s ease'
    toast.style.opacity = '0'
    setTimeout(() => { toast.remove() }, 300)
  }, 1800)
}
</script>

 

<style scoped>
.exchange-page {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

/* 顶部核心引导区 */
.top-guide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #42b983 0%, #2a8a64 100%);
  border-radius: 15px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  color: white;
}

.title-section {
  display: flex;
  align-items: center;
  gap: 15px;
}

.title-icons {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 1.8rem;
}

.title-content .page-title {
  margin: 0;
  font-size: 1.8rem;
  font-weight: bold;
}

.title-content .subtitle {
  margin: 5px 0 0 0;
  font-size: 1rem;
  opacity: 0.9;
}

.publish-button {
  background-color: #42b983;
  border: 2px solid white;
  border-radius: 25px;
  padding: 12px 25px;
  text-decoration: none;
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.publish-button:hover {
  background-color: #2a8a64;
  transform: scale(1.05);
}

.button-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.camera-icon {
  font-size: 1.2rem;
}

.button-text {
  font-weight: bold;
  font-size: 1rem;
}

.small-text {
  font-size: 0.8rem;
  opacity: 0.9;
}

/* 页面内容布局 */
.exchange-content {
  display: grid;
  grid-template-columns: 300px 1fr 250px;
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}

/* 左侧功能导航区 */
.left-navigation {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.publish-module, .category-navigation, .communication-help {
  background: white;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  padding: 20px;
  box-sizing: border-box;
}

.publish-header, .category-header, .help-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.publish-header h2, .category-header h2, .help-header h2 {
  margin: 0;
  color: #2c3e50;
  font-size: 1.3rem;
}

.publish-content {
  margin-bottom: 20px;
}

.publish-text {
  margin: 0 0 10px 0;
  color: #6c757d;
  font-size: 1.1rem;
}

.ai-tag {
  display: inline-block;
  background-color: #42b983;
  color: white;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: bold;
}

.publish-btn {
  width: 100%;
  padding: 12px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 25px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.publish-btn:hover {
  background-color: #2a8a64;
  transform: scale(1.02);
}

.plus-icon {
  font-size: 1.2rem;
}

.category-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.category-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.category-item:last-child {
  border-bottom: none;
}

.category-name {
  color: #2c3e50;
  font-weight: 500;
}

.category-count {
  color: #42b983;
  font-size: 0.9rem;
}

.help-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.help-item {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
}

.help-item:last-child {
  border-bottom: none;
}

.help-text {
  color: #2c3e50;
  font-weight: 500;
}

.new-tag {
  background-color: #ff6b35;
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.7rem;
}

/* 中间主内容区 */
.main-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 同城筛选工具栏 */
.filter-toolbar {
  background: white;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  padding: 15px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-sizing: border-box;
}

.distance-filter {
  display: flex;
  gap: 10px;
}

.filter-btn {
  padding: 8px 15px;
  border-radius: 20px;
  background-color: #f8f9fa;
  color: #6c757d;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 0.9rem;
}

.filter-btn:hover,
.filter-btn.active {
  background-color: #42b983;
  color: white;
}

.sort-filter select,
.type-filter select {
  padding: 8px 15px;
  border-radius: 20px;
  border: 1px solid #dee2e6;
  background-color: white;
  font-size: 0.9rem;
}

/* 双栏物品卡片流 */
.item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.item-card {
  background: white;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s;
  box-sizing: border-box;
}

.item-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.card-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ai-label {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: rgba(66, 185, 131, 0.9);
  color: white;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: bold;
}

.card-content {
  padding: 20px;
}

.item-title {
  margin: 0 0 10px 0;
  color: #2c3e50;
  font-size: 1.2rem;
}

.item-description {
  margin: 0 0 20px 0;
  color: #6c757d;
  font-size: 0.9rem;
  line-height: 1.5;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-info {
  display: flex;
  gap: 15px;
}

.distance, .time {
  color: #6c757d;
  font-size: 0.9rem;
}

.contact-btn {
  padding: 8px 15px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 20px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
}

.contact-btn:hover {
  background-color: #2a8a64;
  transform: scale(1.05);
}

/* 右侧辅助信息区 */
.right-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.safety-tips, .exchange-dynamics, .carbon-results {
  background: white;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  padding: 20px;
  box-sizing: border-box;
}

.safety-tips .tips-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.safety-tips .tips-header h3 {
  margin: 0;
  color: #2c3e50;
}

.tips-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 15px;
}

.tip-item {
  display: flex;
  gap: 10px;
}

.tip-number {
  background-color: #42b983;
  color: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: bold;
  flex-shrink: 0;
}

.tip-text {
  color: #6c757d;
  font-size: 0.9rem;
  line-height: 1.4;
}

.more-link {
  color: #42b983;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
}

.exchange-dynamics h3 {
  margin: 0 0 15px 0;
  color: #2c3e50;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.dynamics-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.dynamic-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
  font-size: 0.9rem;
}

.dynamic-item:last-child {
  border-bottom: none;
}

.user {
  color: #42b983;
  font-weight: 500;
}

.action {
  color: #6c757d;
}

.time {
  color: #adb5bd;
  font-size: 0.8rem;
}

.carbon-results {
  background: #ffffff; /* 文字区域背景改为浅白色 */
  border-radius: 15px;
  padding: 25px 20px; /* 文字区域内边距：左右20px、上下25px */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.carbon-results .results-content {
  text-align: center;
}

.icon-section {
  display: flex;
  justify-content: center;
  gap: 10px;
  font-size: 2rem;
  margin-bottom: 15px;
}

.carbon-results h3 {
  margin: 0 0 15px 0; /* 标题与副标题间距15px */
  color: #2E8B57; /* 深绿色粗体标题，匹配ecologi的品牌主色 */
  font-size: 1.5rem;
  font-weight: bold;
}

.result-text {
  margin: 0 0 20px 0; /* 副标题与"了解更多"间距20px */
  color: #6c757d; /* 浅灰色常规字体副标题 */
  line-height: 1.6;
  font-size: 1rem;
}

.highlight {
  color: #2E8B57; /* 深绿色文字 */
  font-weight: bold;
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content, .contact-modal {
  background: white;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-sizing: border-box;
}

.publish-modal {
  background: white;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  width: 90%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  box-sizing: border-box;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.modal-header h2 {
  margin: 0;
  color: #2c3e50;
}

.close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #6c757d;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  color: #2c3e50;
}

.modal-body {
  padding: 20px;
}

.form-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.form-row label { color: #2c3e50; font-weight: 600; }
.form-row input[type="text"], .form-row textarea, .form-row select { padding: 10px; border: 1px solid #e2e8f0; border-radius: 10px; }
.image-preview { margin-top: 10px; }
.image-preview img { width: 100%; max-height: 220px; object-fit: cover; border-radius: 10px; }
.type-chip { position: absolute; top: 10px; right: 10px; padding: 6px 10px; border-radius: 999px; font-size: 12px; color: #fff; }
.type-chip.exchange { background: #22c55e; }
.type-chip.gift { background: #f59e0b; }
.user-row { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.avatar-mini-wrap { width: 28px; height: 28px; }
.avatar-mini { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; display: block; }
.avatar-mini.placeholder { background: #e2e8f0; border-radius: 50%; }
.user-meta { display: flex; flex-direction: column; line-height: 1.2; }
.name-mini { color: #1f2937; font-weight: 600; font-size: 13px; }
.location-mini { color: #64748b; font-size: 12px; }
.contact-mini { display: flex; gap: 12px; margin-top: 4px; }
.phone-mini, .email-mini { color: #475569; font-size: 12px; }
.location-preview { display: flex; align-items: center; gap: 10px; background-color: #f0f8ff; border: 1px solid #e6f3ff; border-radius: 10px; padding: 10px; }
.location-icon { font-size: 1rem; }
.location-text { flex: 1; color: #334155; }
.relo-btn { border: none; background: #f1f5f9; color: #334155; padding: 8px 12px; border-radius: 8px; cursor: pointer; }
.relo-btn:disabled { opacity: 0.6; cursor: default; }

.tip-content h3 {
  margin: 0 0 5px 0;
  color: #2c3e50;
}

.tip-content p {
  margin: 0;
  color: #6c757d;
  line-height: 1.5;
}

.modal-footer {
  padding: 20px;
  border-top: 1px solid #eee;
  text-align: center;
}

.confirm-btn {
  padding: 12px 30px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 25px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
}

.confirm-btn:hover {
  background-color: #2a8a64;
  transform: scale(1.05);
}

/* 联系弹窗特有样式 */
.safety-reminder {
  background-color: #fff8e6;
  border-radius: 10px;
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.warning-icon {
  font-size: 1.5rem;
}

.safety-reminder p {
  margin: 0;
  color: #ff6b35;
  font-size: 0.9rem;
}

.item-preview {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.item-preview img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 10px;
}

.item-info h3 {
  margin: 0 0 10px 0;
  color: #2c3e50;
}

.item-info p {
  margin: 0;
  color: #6c757d;
  font-size: 0.9rem;
}

.contact-options {
  display: flex;
  gap: 15px;
}

.chat-btn, .phone-btn {
  flex: 1;
  padding: 12px;
  border-radius: 25px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
}

.chat-btn {
  background-color: #42b983;
  color: white;
  border: none;
}

.phone-btn {
  background-color: #f8f9fa;
  color: #2c3e50;
  border: 1px solid #dee2e6;
}

.chat-btn:hover {
  background-color: #2a8a64;
  transform: scale(1.02);
}

.phone-btn:hover {
  background-color: #e9ecef;
  transform: scale(1.02);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .exchange-content {
    grid-template-columns: 250px 1fr 200px;
  }
  
  .page-title {
    font-size: 1.5rem;
  }
  
  .item-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

@media (max-width: 992px) {
  .exchange-content {
    grid-template-columns: 1fr;
  }
  
  .top-guide {
    flex-wrap: wrap;
    gap: 20px;
  }
  
  .filter-toolbar {
    flex-wrap: wrap;
  }
  
  .distance-filter {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .exchange-page {
    padding: 15px;
  }
  
  .top-guide {
    padding: 15px;
  }
  
  .title-icons {
    font-size: 1.5rem;
  }
  
  .title-content .page-title {
    font-size: 1.5rem;
  }
  
  .publish-button {
    padding: 10px 20px;
  }
  
  .button-text {
    font-size: 0.9rem;
  }
  
  .exchange-content {
    gap: 15px;
  }
  
  .publish-module, 
  .category-navigation, 
  .communication-help,
  .main-content,
  .right-info {
    padding: 20px;
  }
  
  .item-grid {
    grid-template-columns: 1fr;
  }
  
  .contact-options {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .top-guide {
    padding: 10px;
  }
  
  .title-section {
    gap: 10px;
  }
  
  .title-icons {
    font-size: 1.3rem;
  }
  
  .title-content .page-title {
    font-size: 1.3rem;
  }
  
  .title-content .subtitle {
    font-size: 0.9rem;
  }
  
  .publish-button {
    padding: 8px 15px;
  }
  
  .button-text {
    font-size: 0.8rem;
  }
  
  .small-text {
    font-size: 0.7rem;
  }
  
  .filter-toolbar {
    padding: 10px;
    gap: 10px;
  }
  
  .filter-btn {
    padding: 6px 12px;
    font-size: 0.8rem;
  }
  
  .sort-filter select,
  .type-filter select {
    padding: 6px 12px;
    font-size: 0.8rem;
  }
  
  .card-content {
    padding: 15px;
  }
  
  .item-title {
    font-size: 1.1rem;
  }
  
  .modal-content, .contact-modal {
    width: 95%;
    max-width: 95%;
  }
}
</style>
